<template>
    <div>
        <el-row>
            <el-col :span="5">
                <el-button type="primary" @click="$router.push('/admin/addproject')">新增</el-button>
            </el-col>
        </el-row>
        <el-table
            :data="prolist.slice(
                (currentPage - 1) * pagesize,
                currentPage * pagesize
            )"
            style="width: 100%"
        >
            <el-table-column label="ID" prop="ID" align="center"  width="50" type="index"></el-table-column>
            <el-table-column
                prop="name"
                label="项目名称"
                align="center" 
                width="200">
                <template slot-scope="scope">
                    <span>{{scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="desc"
                label="项目描述"
                align="center" 
                width="300">
            </el-table-column>
            <el-table-column
                prop="url"
                label="项目地址"
                align="center" 
                width="350">
            </el-table-column>
            <el-table-column
                prop="img"
                label="封面"
                align="center" 
                width="100">
            </el-table-column>
            <el-table-column fixed="right" align="center" label="操作" >
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="primary" plain size="small">编辑</el-button>
                    <el-button @click="deleteClick(scope.row)" type="danger"  plain size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination background small layout="prev, pager, next"
                :total="prolist.length"
                :page-size="pagesize"
                :current-page="currentPage"
                @current-change="handleCurrentChange"
            >
            </el-pagination>
        </div>
    </div>

</template>

<script>

export default {
    data() {
        return {
            total: 0,
            pagesize: 3,
            currentPage: 1,
            prolist: []
        }
    },
    methods: {
        async getProjectList() {
            const { data: res } = await this.$http.get("/project/getpro", this.prolist)
            if (res.status !== 200) {
                return this.$message.error(res.message)
            }
            this.prolist = res.data
        },
        deleteClick(row) {
            this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(async() => {
                const { data: res } = await this.$http.delete(`project/delpro/${row.ID}`);
                if (res.status != 200) {
                    return this.$message.error(res.message);
                }
                this.$message({
                    type: "success",
                    message: "删除成功!",
                });
                this.getProjectList();
            }).catch(() => {
                this.$message({
                    type: "info",
                    message: "已取消删除",
                });
            });
        },
        handleClick(row){
            this.$router.push(`/admin/addproject/${row.ID}`)
        },
        handleCurrentChange(val) {
            this.currentPage = val
        }
    },
    mounted() {
        this.getProjectList()
    }
}
</script>

<style scoped>

</style>